import React from 'react';
import { apiPrefix } from 'shared/api';
import Axios from 'axios';
import BasicInformation from './EditInputModule/BasicInformation';
import Education from './EditInputModule/Education';
import ThemeContext from './data';
import store from '../../../store/index';

import './index.less';


class EditRoster extends React.Component {
  constructor(props) {
    super(props);
    console.log(store.getState());
    this.tabs = [
      { title: '基本信息' },
      { title: '教育经历' },
      { title: '家庭成员' },
      { title: '培训经验' },
      { title: '工作业绩' },
    ];
    this.state = store.getState();
    store.subscribe(this.storeChange);
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/educations?roster_id=${this.props.match.params.id}`;
    Axios.get(api)
      .then((response) => {
        const action = {
          type: 'education',
          value: response.data.data,
        };
        this.setState({ education: response.data.data });
        store.dispatch(action);
      });
  }
  storeChange=() => {
    this.setState(store.getState());
  }
  changeTabs=(index) => {
    const action = {
      type: 'checkTab',
      value: index,
    };
    store.dispatch(action);
  }
  render() {
    const { checkTab, education } = this.state;
    console.log(checkTab);
    return (
      <div className="content">
        <div>
          <h3>编辑员工属性</h3>
          <section className="edit-roster-section">
            <ul className="edit-roster-ul">
              {
                this.tabs.map((value, index) => (
                  <li key={index} onClick={() => this.changeTabs(index)} className={checkTab === index ? 'check-tab' : 'no-check'}>{value.title}</li>
                ))
              }
            </ul>
          </section>
          <ThemeContext.Provider value="context">
            {checkTab === 0 && <BasicInformation />}
            {checkTab === 1 && <Education data={education} />}
          </ThemeContext.Provider>
        </div>
      </div>
    );
  }
}

export default EditRoster;
